<template>
  <div class="customer">
    <van-nav-bar
        title="拓天每日发货列表"
        left-arrow
        left-text="返回"
        @click-left="back"
    />
    <van-search
        v-model="seorderfbillno"
        shape="round"
        show-action
        background="#57a3f3"
        placeholder="请输入销售订单号"
    >
      <template #action>
        <van-button round  size="small" type="info" @click="onSearch(1)" style="width: 60px;">查询</van-button>
      </template>
    </van-search>
    <div style="width: 100%;height: 100%;background: #ffffff;margin-top: 10px">
      <van-list style="overflow: scroll">
        <div class="listColumn">
          <div>状态</div>
          <div>制单日期</div>
          <div>发货日期</div>
          <div>原发货日期</div>
          <div>客户</div>
          <div>销售订单号</div>
          <div>客户合同号</div>
          <div>数量</div>
          <div>名称</div>
          <div>领料状态</div>
          <div>未领料数量</div>
          <div>入库数量</div>
          <div>务必发货</div>
          <div>仓库核对发货数</div>
          <div>是否带检验报告</div>
        </div>
        <div class="listItem" v-for="(task, index) in taskList" :key="index" @click="toDetail(task)">
          <div>{{ task.fstatusname }}</div>
          <div>{{ task.fdate }}</div>
          <div>{{ task.newdate }}</div>
          <div>{{ task.olddate }}</div>
          <div>{{ task.fcust }}</div>
          <div>{{ task.seorderfbillno }}</div>
          <div>{{ task.fnote }}</div>
          <div>{{ task.fauxqty }}</div>
          <div>{{ task.fname }}</div>
          <div>{{ task.lldate }}</div>
          <div>{{ task.wllqty }}</div>
          <div>{{ task.fstockqty }}</div>
          <div>{{ task.wbfnote }}</div>
          <div>{{ task.FAuxStockQty }}</div>
          <div>{{ task.ischeck }}</div>
        </div>
      </van-list>
    </div>
    <div>
      <van-pagination v-model="pageNo" mode="simple" :total-items="total" :show-page-size="6" :items-per-page="pageSize" force-ellipses @change="changePg">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { ttdailySeoutStocklist } from '@/api/api'
  import { Notify } from 'vant'

  export default {
    name: "ttDailyShipmentList",
    data () {
      return {
        loading: false,
        seorderfbillno: '', // 单据编号
        pageNo:1,
        total: 0, // 总页数
        pageSize: 20, //每页显示条数
        taskList: []
      }
    },
    computed: {
      ...mapState({
        openId: state => state.user.openId
      })
    },
    mounted() {
    },
    created () {
      this.getList(1)
    },
    methods: {
      changePg () {
        this.getList(this.pageNo)
      },
      onSearch (pageNo) {
        this.getList(pageNo)
      },
      getList (pageNo) {
        ttdailySeoutStocklist({
          seorderfbillno: this.seorderfbillno,
          // open_id: this.openId,
          pageNo: pageNo,
          pageSize: this.pageSize
        }).then(res => {
          if (res.success) {
            this.taskList = res.result.records
            this.total = res.result.total
          }else {
            Notify({ type: 'danger', message: res.message, duration: 4000 })
          }

        })
      },
      //详情
      toDetail(task) {
        // this.$router.push({
        //   name: 'dnPickDetail',
        //   params: {
        //     seorderfbillno: task.seorderfbillno
        //   }
        // })
      },
      back () {
        this.$router.push({name: 'modules'})
      },
    }
  }
</script>

<style scoped>
  .customer{
    min-height: 100vh;
    background: #ffffff;
  }
  .listColumn{
    width: 2300px;
    display: flex;
    line-height: 45px;
    background: #eee;
  }
  .listColumn div:nth-of-type(1) {
    width: 100px;
  }
  .listColumn div:nth-of-type(2) {
    width: 100px;
  }
  .listColumn div:nth-of-type(3) {
    width: 100px;
  }
  .listColumn div:nth-of-type(4) {
    width: 100px;
  }
  .listColumn div:nth-of-type(5) {
    width: 400px;
  }
  .listColumn div:nth-of-type(6) {
    width: 150px;
  }
  .listColumn div:nth-of-type(7) {
    width: 150px;
  }
  .listColumn div:nth-of-type(8) {
    width: 100px;
  }
  .listColumn div:nth-of-type(9) {
    width: 400px;
  }
  .listColumn div:nth-of-type(10) {
    width: 100px;
  }
  .listColumn div:nth-of-type(11) {
    width: 100px;
  }
  .listColumn div:nth-of-type(12) {
    width: 100px;
  }
  .listColumn div:nth-of-type(13) {
    width: 100px;
  }
  .listColumn div:nth-of-type(14) {
    width: 150px;
  }
  .listColumn div:nth-of-type(15) {
    width: 150px;
  }
  .listItem{
    width: 2300px;
    display: flex;
    line-height: 38px;
    border-bottom: 1px solid #eeeeee;
  }
  .listItem div:nth-of-type(1) {
    width: 100px;
  }
  .listItem div:nth-of-type(2) {
    width: 100px;
  }
  .listItem div:nth-of-type(3) {
    width: 100px;
  }
  .listItem div:nth-of-type(4) {
    width: 100px;
  }
  .listItem div:nth-of-type(5) {
    width: 400px;
  }
  .listItem div:nth-of-type(6) {
    width: 150px;
  }
  .listItem div:nth-of-type(7) {
    width: 150px;
  }
  .listItem div:nth-of-type(8) {
    width: 100px;
  }
  .listItem div:nth-of-type(9) {
    width: 400px;
  }
  .listItem div:nth-of-type(10) {
    width: 100px;
  }
  .listItem div:nth-of-type(11) {
    width: 100px;
  }
  .listItem div:nth-of-type(12) {
    width: 100px;
  }
  .listItem div:nth-of-type(13) {
    width: 100px;
  }
  .listItem div:nth-of-type(14) {
    width: 150px;
  }
  .listItem div:nth-of-type(15) {
    width: 150px;
  }
</style>